<script setup>
import { reactive } from 'vue'
import { isDef } from '@/core/utils/Common'
import suggestApi from '@/api/advice/suggestApi'

// TABS
const tabListNoTitle = [ { key: 'main', tab: '基本信息' }, { key: 'content', tab: '内容信息' }]
const state = reactive({ visible: false, activeTabs: 'main' })
// 表单数据
const formState = reactive({
  id: '',
  column: {},
  title: '',
  thumb: '',
  author: '',
  summary: '',
  notes: '',
  idx: '',
  tags: ['手机', '配件'],
  status: [],
  createOn: '',
  createBy: ''
})
// 初始化数据
const InitializeData = (primaryKey) => {
  if (isDef(primaryKey)){
    console.info('fectData......')
    suggestApi.getFromById(primaryKey).then(res => {
      if (res.code == 0) {
        Object.assign(formState, res.data)
      } else {
        console.info('=========INFO===========')
      }
    })

  } else {
    console.info('新增的表单')
  }
  state.visible = true
}
// 向父组件暴露方法和属性
defineExpose({ InitializeData })

</script>
<template>
  <a-drawer
    v-model:visible="state.visible"
    :title="`查看文章`"
    placement="right"
    :width="'50%'"
  >
    <template #extra>
      <a-button type="link" @click="state.visible=false">关闭</a-button>
    </template>
    <a-card
      hoverable
      :tab-list="tabListNoTitle"
      :active-tab-key="noTitleKey"
      @tab-change="(key) => state.activeTabs = key"
    >
      <a-descriptions v-if="state.activeTabs == 'main'" :column="2" bordered>
        <a-descriptions-item label="标题" :span="2">{{ formState.title }}</a-descriptions-item>
        <a-descriptions-item label="栏目">{{ formState.column.label }}</a-descriptions-item>
        <a-descriptions-item label="作者">{{ formState.author }}</a-descriptions-item>
        <a-descriptions-item label="标签">{{ formState.tags }}</a-descriptions-item>
        <a-descriptions-item label="排序">{{ formState.idx }}</a-descriptions-item>
        <a-descriptions-item label="简介" :span="2">{{ formState.summary }}</a-descriptions-item>
        <a-descriptions-item label="备注">{{ formState.notes }}</a-descriptions-item>
      </a-descriptions>
      <a-typography v-if="state.activeTabs == 'content'">
        <a-typography-title>{{ formState.title }}</a-typography-title>
        <a-typography-paragraph>
          {{ formState.summary }}
        </a-typography-paragraph>
      </a-typography>
    </a-card>
  </a-drawer>
</template>